<template>
	<view class="page-container">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="iconfont icon-back">&#xe679;</text>
			</view>
			<view class="title">联系方式</view>
		</view>
		
		<view class="contact-card">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="info">
					<text class="name">{{ userInfo.name }}</text>
					<text class="basic">{{ userInfo.age }}岁 | {{ userInfo.location }}</text>
				</view>
			</view>
			
			<view class="contact-list">
				<view class="contact-item" v-if="userInfo.wechat">
					<view class="left">
						<text class="iconfont icon-wechat">&#xe681;</text>
						<text class="label">微信号</text>
					</view>
					<view class="right">
						<text class="value">{{ userInfo.wechat }}</text>
						<button class="copy-btn" @click="copyText(userInfo.wechat)">复制</button>
					</view>
				</view>
				
				<view class="contact-item" v-if="userInfo.phone">
					<view class="left">
						<text class="iconfont icon-phone">&#xe680;</text>
						<text class="label">手机号</text>
					</view>
					<view class="right">
						<text class="value">{{ userInfo.phone }}</text>
						<button class="copy-btn" @click="copyText(userInfo.phone)">复制</button>
					</view>
				</view>
				
				<view class="contact-item" v-if="userInfo.qq">
					<view class="left">
						<text class="iconfont icon-qq">&#xe682;</text>
						<text class="label">QQ号</text>
					</view>
					<view class="right">
						<text class="value">{{ userInfo.qq }}</text>
						<button class="copy-btn" @click="copyText(userInfo.qq)">复制</button>
					</view>
				</view>
			</view>
			
			<view class="tips">
				<text class="tips-icon">&#xe678;</text>
				<text class="tips-text">温馨提示：请注意保护个人隐私，谨防网络诈骗</text>
			</view>
		</view>
		
		<view class="action-buttons">
			<button class="action-btn primary" @click="addToContacts">保存到通讯录</button>
			<button class="action-btn secondary" @click="report">举报用户</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				id: '',
				name: '',
				age: '',
				location: '',
				avatar: '',
				wechat: '',
				phone: '',
				qq: ''
			}
		}
	},
	onLoad(options) {
		// 获取上一页面传递的用户ID
		if (options.id) {
			this.fetchUserContact(options.id)
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		fetchUserContact(id) {
			// TODO: 调用接口获取用户联系方式
			// 模拟数据
			this.userInfo = {
				id: id,
				name: '张小姐',
				age: 28,
				location: '北京',
				avatar: '/static/images/avatar1.jpg',
				wechat: 'zhangxiaojie888',
				phone: '13812345678',
				qq: '12345678'
			}
		},
		copyText(text) {
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			})
		},
		addToContacts() {
			uni.showToast({
				title: '已保存到通讯录',
				icon: 'success'
			})
		},
		report() {
			uni.showModal({
				title: '举报用户',
				content: '确定要举报该用户吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '举报成功',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.page-container {
	min-height: 100vh;
	background: #f8f9fa;
	padding-bottom: 30rpx;
	
	.header {
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.back-btn {
			position: absolute;
			left: 30rpx;
			font-size: 36rpx;
			color: #333;
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.contact-card {
		background: #fff;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
		
		.user-info {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 20rpx;
			}
			
			.info {
				.name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 8rpx;
				}
				
				.basic {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.contact-list {
			padding: 20rpx 0;
			
			.contact-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				
				.left {
					display: flex;
					align-items: center;
					
					.iconfont {
						font-size: 40rpx;
						color: #f69489;
						margin-right: 16rpx;
					}
					
					.label {
						font-size: 28rpx;
						color: #333;
					}
				}
				
				.right {
					display: flex;
					align-items: center;
					
					.value {
						font-size: 28rpx;
						color: #666;
						margin-right: 16rpx;
					}
					
					.copy-btn {
						font-size: 24rpx;
						color: #f69489;
						background: rgba(246,148,137,0.1);
						padding: 8rpx 20rpx;
						border-radius: 24rpx;
						
						&:active {
							opacity: 0.8;
						}
					}
				}
			}
		}
		
		.tips {
			display: flex;
			align-items: center;
			background: rgba(246,148,137,0.1);
			padding: 16rpx 20rpx;
			border-radius: 12rpx;
			margin-top: 20rpx;
			
			.tips-icon {
				font-size: 28rpx;
				color: #f69489;
				margin-right: 8rpx;
			}
			
			.tips-text {
				font-size: 24rpx;
				color: #f69489;
			}
		}
	}
	
	.action-buttons {
		padding: 0 30rpx;
		margin-top: 40rpx;
		
		.action-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			
			&.primary {
				background: #f69489;
				color: #fff;
				
				&:active {
					opacity: 0.9;
				}
			}
			
			&.secondary {
				background: #fff;
				color: #666;
				border: 2rpx solid #ddd;
				
				&:active {
					background: #f5f5f5;
				}
			}
		}
	}
}
</style> 